import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import React from 'react';
import {useNavigate,useLocation} from 'react-router-dom'
const { Sider } = Layout;

// const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
//     const key = String(index + 1);
//     return {
//         key: `sub${key}`,
//         icon: React.createElement(icon),
//         label: `subnav ${key}`,
//         children: new Array(4).fill(null).map((_, j) => {
//             const subKey = index * 4 + j + 1;
//             return {
//                 key: subKey,
//                 label: `option${subKey}`,
//             };
//         }),
//     };
// });
const nav = [
    {
        key: '/nav',
        icon: React.createElement(LaptopOutlined),
        label: '首页',
    },
    {
        key: '/nav/order',
        icon: React.createElement(NotificationOutlined),
        label: '订单管理',
    },
    {
        key: 'shop-manangement',
        icon: React.createElement(NotificationOutlined),
        label: '店铺管理',
        children: [{
            key: '/nav/shopList',
            label: '店铺列表'
        },
        {
            key: '/nav/addShop',
            label: '添加店铺'
        }
        ]
    },
    {
        key: 'account-management',
        icon: React.createElement(NotificationOutlined),
        label: '账号管理',
        children: [{
            key: '/nav/accountList',
            label: '账号列表'
        },
        {
            key: '/nav/addAccount',
            label: '添加账号'
        }
        ]
    },
]

export default function Mysilder() {
    const Navigate=useNavigate()
    const Location=useLocation()
    console.log(Location.pathname);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    function toContent(val){
        
        const [path,titleKey]=val.keyPath
        console.log(Location.pathname);
        Navigate(path,{state:titleKey})
    }
    return (
        <Sider
            width={200}
            style={{
                background: colorBgContainer,
            }}
        >
            <Menu
                mode="inline"
                //默认选中选项
                selectedKeys={[Location.pathname]}
                 //默认打开的菜单
                defaultOpenKeys={[Location.state]}
                style={{
                    height: '100%',
                    borderRight: 0,
                }}
                items={nav}
                onClick={toContent}
            />
        </Sider>
    )
}
